<template>
  <div class="margin-left-right-16 margin-bottom-20 margin-top-10 edit-item-textarea textarea-nomal">
    <label class="textarea-normal-label">
      {{label}}
      <TooltipsCommon v-if="!!getTooltips" :tooltips="getTooltips"></TooltipsCommon>
    </label>
    <el-input
      type="textarea"
      autosize
      v-model="modelValue"
      :rows="row"
      :placeholder="placeholder"
      :disabled="toBool(disabled)"
      @input="onChange">
    </el-input>
  </div>
</template>

<script>
  import { defineAsyncComponent } from 'vue';
  export default {
    name: 'TextareaNormal',
    emits: ['change','update:modelValue'],
    props: {
      label: String,
      tooltips: String,
      modelValue: [String, Number],
      placeholder: {
        type: String,
        default: '',
      },
      row: {
        type: Number,
        default: 3,
      },
      disabled: {
        type: Boolean,
        default: false,
      },
    },
    components: {
      TooltipsCommon: defineAsyncComponent(() => import('./comps/TooltipCommon.vue')),
    },
    computed: {
      getTooltips() {
        return !this.tooltips && this.placeholder ? this.placeholder : this.tooltips;
      }
    },
    methods: {
      onChange(val) {
        this.$emit('update:modelValue', val);
        this.$emit('change', val);
      },
      toBool(val) {
        return typeof val === "boolean" ? val
          : val === "true" ? true : false;
      }
    },
  }
</script>

<style lang="scss">
  .textarea-nomal {
    .textarea-normal-label {
      float: left;
      margin: 0 16px 0 0;
      line-height: 40px;
      min-width: 56px;
      vertical-align: middle;
    }
  }
</style>
